<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/comm/control.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mine:css href="fullcalendar.css"/>
<mine:css href="fullcalendar.print.css" media="print"/>
<mine:script src="fullcalendar/fullcalendar.js"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var url = '<s:url action="event/getEvent" namespace="/ajax"></s:url>';
var addUrl = '<s:url action="event/addEvent" namespace="/ajax"></s:url>';
var addFromUrl = '<s:url value="/dialog/addEvent.jsp"></s:url>';
var titleText = '<s:text name="UI-00006"></s:text>';
var submitText = '<s:text name="UI-00004"></s:text>';
var cancelText = '<s:text name="UI-00007"></s:text>';
var confirmText = '<s:text name="UI-00019"></s:text>';
var viewTitleText = '<s:text name="UI-00018"></s:text>';
var showEventUrl = '<s:url value="/dialog/showEvent.jsp"></s:url>';
var calendar = null;
	$(function(){
		calendar = $("div").fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
            monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "8", "10", "11", "12"],  
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            today: ["今天"],  
            firstDay: 1,  
            timeFormat: 'HH:mm{ - HH:mm} \n\r',
            axisFormat:'HH:mm',
             buttonText: {  
              today: '今天',  
              month: '月',  
              week: '周',  
              day: '日' 
            }, 
           // currentTimezone: 'Asia/Beijing',
            titleFormat: {
        		month: 'yyyy MMMM',
        		week: "yyyy-MMM '&nbsp;&nbsp;' d[ yyyy]{ '&#8212;'[ MMM] d}",
        		day: 'yyyy-MMM-d, dddd'
        	},
        	columnFormat: {
        		month: 'ddd',
        		week: 'ddd M/d',
        		day: 'dddd M/d'
        	},   
			selectable: true,
			selectHelper: true,

			startParam: 'startTime',
			endParam: 'endTime',
			select: function(start, end, allDay, jsEvent, view) {
				//var title = prompt('Event Content:');
				var title = null;
				getAddForm(start, end, allDay);
				calendar.fullCalendar('unselect');
			},
			editable: true,
			events: url,
			eventClick: function( event, jsEvent, view ) { 
				showEventDetail(event);
				if (event.url) {
		            return false;
		        }
				//calendar.fullCalendar('unclick');
			},
		});
		
			
	});
	//添加事件
	function addEvent(start, end, allDay, title){
		$.ajax({
			url: addUrl,
			type: "POST",
			cache: false,
			async: false,
			data: {start: $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"), 
				end: $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss"), 
				allDay: allDay, 
				title: title},
			success: function(data){
			}
		});
	}
	//用JSON数据添加事件
	function addEventByJsonData(formData){
		$.ajax({
			url: addUrl,
			type: "POST",
			cache: false,
			async: false,
			data: formData,
			success: function(data){
				if (data.id) {
					formData["id"] = data.id;
					calendar.fullCalendar('renderEvent',
		        			formData,
							true // make the event "stick"
					);
				}
			}
		});
	}
	//获取表单
	function getAddForm(start, end, allDay){
		var formData = false;
		var myDialog = null;
		$.ajax({
			url: addFromUrl,
			type: "POST",
			cache: false,
			async: false,
			success: function(data){
				myDialog = $.dialog({
					id: 'addForm',
					title: titleText,
					lock: true,
					content : data,
					button: [{
							id : "submit",
				       		value: submitText,
					        focus: true,
					        callback: function () {
					        	formData = $("#eventForm").serializeJson();
					        	formData['start'] = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
					        	formData['end'] = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
					        	formData['allDay'] = allDay;
					        	addEventByJsonData(formData);
					        	}
						    }, 
						    {
					        id: 'cancel',
					        value: cancelText,
					        callback: function () {
						        formData = false;
					        }
						    }]
				});
			}
		});
		return formData;
	}
	//显示事件详细
	function showEventDetail(event) { 
		$.ajax({
			url: showEventUrl,
			type: "POST",
			cache: false,
			async: false,
			data: event,
			success: function(data){
				myDialog = $.dialog({
					id: 'viewEvent',
					title: viewTitleText,
					lock: true,
					content : data,
					button: [{
							id : "submit",
				       		value: confirmText,
					        focus: true,
					        callback: function () {
						        return true;
					        	}
						    }]
				});
			}
		});
	}
</script>
</head>
<body>
	<div style="width: 800px;margin: 0 auto;"></div>
</body>
</html>